<template>
  <div>
    <div class="container">
      <div class="left">
        <div class="menuNav">
          <MenuNav />
        </div>
        <!-- 推荐城市 -->
        <div class="recommend">
          <h4>推荐城市</h4>
          <nuxt-link to="#">
            <img src="http://157.122.54.189:9093/images/pic_sea.jpeg" alt />
          </nuxt-link>
        </div>
      </div>
      <div class="right">
        <SearchCity />
        <div class="recommend">
          <h3>推荐攻略</h3>
          <el-button type="primary" icon="el-icon-edit" @click="$router.push('/post/create')">写游记</el-button>
        </div>
        <!-- 文章列表 -->
        <postItem v-if="postList.length!=0" :data="item" v-for="item in postList" :key="item.id" />
        <div class="none" v-if="postList.length==0">暂时没有数据</div>
        <!-- 分页 -->
        <el-pagination
          v-if="postList.length!=0"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pageIndex"
          :page-sizes="[1, 2, 3, 4]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        ></el-pagination>
      </div>
    </div>
  </div>
</template>
<script>
import MenuNav from '@/components/post/MenuNav'
import SearchCity from '@/components/post/SearchCity'
import postItem from '@/components/post/postItem'
export default {
  components: {
    MenuNav,
    SearchCity,
    postItem
  },
  data() {
    return {
      postData: [],
      postList: [],
      total: 0,
      pageSize: 3,
      pageIndex: 1,
      city: ''
    }
  },
  created() {
    this.getpostList()
  },
  methods: {
    async getpostList() {
      // console.log(this.$route.query.city)
      if (this.$route.query.city) {
        // console.log(11)
        var { data: res } = await this.$axios.get('/posts', {
          params: { city: this.$route.query.city }
        })
      } else {
        var { data: res } = await this.$axios.get('/posts')
      }
      this.postData = res.data
      // console.log(res.data)
      if (res.data.length > this.pageSize) {
        this.postList = res.data.slice(
          (this.pageIndex - 1) * this.pageSize,
          this.pageSize * this.pageIndex
        )
      } else {
        this.postList = res.data
      }
      this.total = res.total
    },
    // 改变显示条数
    handleSizeChange(newPageSize) {
      this.pageSize = newPageSize
      this.getpostList()
    },
    // 改变页数
    handleCurrentChange(newPageIndex) {
      this.pageIndex = newPageIndex
      this.getpostList()
    }
  },
  watch: {
    $route() {
      this.getpostList()
    }
  }
}
</script>
<style lang="less" scoped>
.container {
  min-width: 1000px;
  width: 1000px;
  margin: 0 auto;
  display: flex;
  padding: 20px 0;
}
.left {
  width: 260px;
  margin-right: 50px;
  .menuNav {
    width: 100%;
    height: 160px;
    border-top: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
  }
  .recommend {
    margin-top: 10px;
    h4 {
      height: 35px;
      font-weight: 400;
      line-height: 35px;
      border-bottom: 1px solid #ddd;
      margin-bottom: 10px;
    }
    img {
      width: 100%;
      object-fit: cover;
    }
  }
}
.right {
  flex: 1;
  .recommend {
    height: 60px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #ddd;
    h3 {
      margin-bottom: -1px;
      display: flex;
      align-items: center;
      height: 100%;
      color: #ffa500;
      font-weight: 300;
      border-bottom: 2px solid #ffa500;
    }
  }
  .none {
    height: 200px;
    line-height: 200px;
    text-align: center;
  }
}
</style>